<!--
 * @Description: 
 * @Author: william
 * @Date: 2025-08-28 15:26:49
 * @LastEditors: william
 * @LastEditTime: 2025-10-09 10:58:27
-->
<template>
  <BaseDialog
    v-model="dialogVisible"
    :title="g_t('public.detail')"
    width="850px"
    :before-close="handleClose"
  >
    <el-descriptions
      v-loading="viewLoading"
      :column="2"
      border
      :label-width="140"
    >
      <el-descriptions-item width="200">
        <template #label>{{ $t('device.deviceModel') }}</template>
        {{ formData.model || '--' }}
      </el-descriptions-item>
      <el-descriptions-item width="200">
        <template #label>调料名称</template>
        <span>{{
          g_options.getOptionText(flavourNameList, formData.flavourCode, '--')
        }}</span>
      </el-descriptions-item>
      <el-descriptions-item width="200">
        <template #label>调料类型</template>
        <span>{{
          g_options.getOptionText(flavourTypeList, formData.flavourType, '--')
        }}</span>
      </el-descriptions-item>
      <el-descriptions-item width="200">
        <template #label>基准系数</template>
        {{ formData.baseCoefficient || '--' }}
      </el-descriptions-item>
      <el-descriptions-item width="200">
        <template #label>校准系数</template>
        {{ formData.adjustCoefficient || '--' }}
      </el-descriptions-item>
    </el-descriptions>
   
    <template #footer>
      <div class="detail-dialog-footer">
        <el-button plain @click="handleClose">{{
          $t('public.close')
        }}</el-button>
      </div>
    </template>
  </BaseDialog>
</template>

<script setup>
import useSelectOptions from '../../hooks/useSelectOptions'

const props = defineProps({
  id: {
    type: String,
    default: ''
  }
})

const dialogVisible = defineModel({
  type: Boolean,
  default: false
})
const viewLoading = ref(false)
const formData = ref({
  actionList: []
})
const {flavourNameList, getflavourNameList ,flavourTypeList, getQueryTypeList} = useSelectOptions()
const refContentTable = ref(null)
const columnWidthObj = ref({})

watch(
  () => formData.value.actionList,
  (nv, ov) => {
    useTableColumnWidth({
      refTable: refContentTable.value
    }).getTableColumnWidth(data => {
      columnWidthObj.value = data
    })
  },
  {
    deep: true
  }
)

onMounted(() => {
  getflavourNameList()
  getQueryTypeList()
  getFormData()
})

const getFormData = () => {
  viewLoading.value = true
  g_api.device
    .apiFlavouradjustDetail({ id: props.id })
    .then(({ code, data }) => {
      if (code === '200' && data) {
        formData.value = data
      }
    })
    .finally(_ => {
      viewLoading.value = false
    })
}

const handleClose = () => {
  dialogVisible.value = false
}
</script>

<style scoped lang="scss"></style>
